import { Card as AntCard } from 'antd-mobile-v2';
import * as React from 'react';
import { Props, State } from '../type';
import styles from './index.module.less';

export class Card extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  public render() {
    const { children, title, className, renderMode } = this.props;
    return (
      <AntCard
        className={
          className +
          ' ' +
          styles.card +
          ' ' +
          (renderMode === 'detail' ? styles.detailCard : '')
        }
        style={{ border: 'none' }}
      >
        <AntCard.Header
          title={
            <div
              className={
                styles.cardTile +
                ' ' +
                (renderMode === 'detail' ? styles.detail : '')
              }
            >
              {title}
            </div>
          }
          // thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
          // extra={<span>this is extra</span>}
        />
        <AntCard.Body id="cardbody">{children}</AntCard.Body>
        {/* <Card.Footer content="footer content" extra={<div>extra footer content</div>} /> */}
      </AntCard>
    );
  }
}
